iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
Mobile Development

IOS App開發學習日誌系列 第 28

D28 @State property、binding

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20191014/20120980Ue2KSYsB1B.png
https://ithelp.ithome.com.tw/upload/images/20191014/20120980XQbqMl16IQ.png
今天要用以上的畫面,透過toggle元件改變變數的數值,來解釋@State跟binding的用法
先在body外宣告一個布林變數為true
https://ithelp.ithome.com.tw/upload/images/20191014/20120980VMRnhKThef.png
並於body內將相關的元件跟判斷放入畫面
https://ithelp.ithome.com.tw/upload/images/20191014/20120980AaxZch095e.png
利用toggle元件來將bool這個變數做改變,Toggle(isOn: bool)
但為何會報錯呢?因為SwiftUI的view通常以struct定義,而struct是value type,因此我們無法在computed property的getter&function裡修改它的property

@State property

至於要如何解決,只要在property bool前加上@State,並
https://ithelp.ithome.com.tw/upload/images/20191014/20120980mArj1MgTNR.png
以@State 宣告的property有個重要的特性,只要它的內容改變,畫面也會立即更新

  • 不用另外寫property 內容改變時更新畫面的程式
  • 不用擔心畫面顯示的內容跟property的內容不同步,發生修改了property,但卻忘了更新畫面

以struct定義的ContentView是value type,為何加了@State就能修改它的property?
因為加了@State後,SwiftUI將在另外產生空間儲存 property的內容,它不再儲存在ContentView裡,因此可以修改它的內容

binding

在呼叫變更bool的時候在前面加上$讓其將@State與toggle元件綁定
https://ithelp.ithome.com.tw/upload/images/20191014/201209804AOtCc6Fim.png
SwiftUI透過型別Binding 的東西實現binding溝通機制,Value 代表綁定的資料型別。由於 Toggle 的狀態只有打開跟關閉兩種,所以它綁定的資料型別為 Bool

完整程式碼:
https://ithelp.ithome.com.tw/upload/images/20191014/20120980fhPAonDuLn.png


上一篇
D27 SwiftUI Viewslibrary
下一篇
D29 1a2b小遊戲
系列文
IOS App開發學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言